<template>
  <!-- <t-form ref="form" :model="formData" layout="inline" colon>
    <t-row>
      <t-col :span="10">
        <t-row :gutter="[24, 24]">
          <t-col v-for="item in formConfig" :key="item.name" :span="item.span || 4">
            <t-form-item :label="item.label">
              <component
                :is="item.type"
                v-model="formData[item.name]"
                :options="item.options"
                :min-collapsed-num="item.minCollapsedNum"
                :multiple="item.multiple"
                :placeholder="item.placeholder"
                :mode="item.mode"
              >
                >
              </component>
            </t-form-item>
          </t-col>
        </t-row>
      </t-col>

      <t-col :span="2" class="operation-container">
        <t-button theme="primary" @click="submitForm">提交</t-button>
        <t-button theme="default" variant="base" @click="resetForm">重置</t-button>
      </t-col>
    </t-row>
  </t-form> -->
  <lay-form :model="formData" :pane="true" size="sm">
    <lay-row>
      <lay-col sm="20">
        <lay-row space="6">
          <lay-col v-for="item in formConfig" :key="item.name" :sm="item.span || 6">
            <lay-form-item :label="item.label">
              <lay-input v-if="item.type == 'input'" v-model="formData[item.name]" :placeholder="item.placeholder"></lay-input>

              <lay-select v-else-if="item.type == 'select'" v-model="formData[item.name]" :multiple="item.multiple" allow-clear :placeholder="item.placeholder" :minCollapsedNum="item.minCollapsedNum">
                <lay-select-option v-for="option in item.options" :key="option.value" :value="option.value" :label="option.label"></lay-select-option>
              </lay-select>

              <lay-date-picker v-else-if="item.type == 'datePicker'" style="width: 100%;" v-model="formData[item.name]" :range="item.range" :type="item.mode" :placeholder="item.placeholder" allowClear></lay-date-picker>
              <!-- <component
                :is="item.type"
                v-model="formData[item.name]"
                :options="item.options"
                :min-collapsed-num="item.minCollapsedNum"
                :multiple="item.multiple"
                :placeholder="item.placeholder"
                :mode="item.mode"
              >
              </component> -->
            </lay-form-item>
          </lay-col>
        </lay-row>
      </lay-col>
      <lay-col :span="2" class="operation-container">
        <lay-button size="sm" type="primary" @click="submitForm">查询</lay-button>
        <lay-button size="sm" type="normal" @click="resetForm">重置</lay-button>
      </lay-col>
    </lay-row>
  </lay-form>
</template>
<script setup lang="ts">
import { ref } from 'vue';

interface Props {
  formConfig: Array<{
    type: string; // 组件类型
    label: string; // 组件标题
    name: string; // 表单列的名称
    span?: number; // 组件宽度,默认为4[可选参数]
    multiple?: boolean; // 是否可以选择多个值[可选参数]
    placeholder?: string; // 输入框 placeholder[可选参数]
    options?: any[]; // 选项参数[可选参数]
    minCollapsedNum?: number; // select最小隐藏项数量[可选参数]
    range?: boolean,//日期范围[可选参数]
    mode?: "time" | "month" | "year" | "date" | "datetime" | "yearmonth" | undefined; // 日期选择模式[可选参数]
  }>;
}

defineProps<Props>();

const emit = defineEmits(['submit']);

const formData: any = ref({});
const form = ref(null);

const submitForm = () => {
  emit('submit', formData);
};

const resetForm = () => {
  formData.value = {};
  emit('submit', formData);
};
</script>

<style lang="less" scoped>
.operation-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;

  .expand {
    .t-button__text {
      display: flex;
      align-items: center;
    }
  }
}
</style>
